<template>
  <div style="z-index: 10000;">
  <vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig" :editorDependencies="['ueditor.config.js','ueditor.all.js']"/>
  </div>
</template>
<script>

import VueUeditorWrap from "vue-ueditor-wrap";

export default {
  name: "MyUeditorPlus",
  components: {
    VueUeditorWrap
  },
  props: ["field", "height", "maximumWords", "toolbarsType"],
  mounted() {
    this.content = this.field;
    this.editorConfig.toolbars = this.fullToolbar;
    if(this.toolbarsType == "indicatorToolbar") {
      this.editorConfig.toolbars = this.indicatorToolbar;
    }
    //this.editorConfig.initialFrameHeight = this.height;
  },
  data() {
    return {
      indicatorToolbar: [["attachment", "fullscreen", "help"]],
      content: null,
       editorConfig: {
        toolbars: this.toolbarsType ? this.toolbarsType: this.fullToolbar,
        UEDITOR_HOME_URL: '/static/UEditorPlus/',
        UEDITOR_CORS_URL: '/static/UEditorPlus/',
        serverUrl: '/dims-hsrc-api/common/uploadUeditor',
        loadConfigFromServer: false, //从服务器取配置
        autoFitContainer: false,
        initialFrameHeight: this.height ? this.height: 200, //初始的高度
        maximumWords: this.maximumWords ? this.maximumWords : 1000, //最大 字数
        autoHeightEnabled: false, //自动长高
        //对spring boot来说是随便取action名，原因是serverUrl遭调用的get和post都是同一个uploadUeditor，ueditorplus传递过去的imageActionName等只是其中附带的一个action参数
        // 图片上传配置
        // 执行上传图片的action名称，默认值：image
        "imageActionName": "/uploadImage",
        // 提交的图片表单名称，默认值：upfile
        "imageFieldName": "file",
        // 上传大小限制，单位B，默认值：2048000
        "imageMaxSize": 10485760,
        // 上传图片格式显示，默认值：[".png", ".jpg", ".jpeg", ".gif", ".bmp"]
        "imageAllowFiles": [
          ".jpg",
          ".png",
          ".jpeg"
        ],
        // 是否压缩图片,默认是true
        "imageCompressEnable": true,
        // 图片压缩最长边限制，默认值：1600
        "imageCompressBorder": 5000,
        // 插入的图片浮动方式，默认值：none
        "imageInsertAlign": "none",
        // 图片访问路径前缀，默认值：空
        "imageUrlPrefix": "",

        // 涂鸦上传配置
        // 执行上传涂鸦的action名称，默认值：scrawl
        "scrawlActionName": "uploadScraw",
        // 提交的图片表单名称
        "scrawlFieldName": "file",
        // 上传大小限制，单位B，默认值：2048000
        "scrawlMaxSize": 10485760,
        // 图片访问路径前缀，默认值：空
        "scrawlUrlPrefix": "",
        // 插入的图片浮动方式，默认值：none
        "scrawlInsertAlign": "none",

        // 截图上传配置
        // 执行上传截图的action名称，默认值：snap
        "snapscreenActionName": "uploadSnapscreen",
        // 图片访问路径前缀
        "snapscreenUrlPrefix": "",
        // 插入的图片浮动方式，默认值：none
        "snapscreenInsertAlign": "none",

        // 图片抓取配置
        // 执行抓取远程图片的action名称，默认值：catch
        "catcherActionName": "/uploadImage",
        // 提交的图片列表表单名称，默认值：source
        "catcherFieldName": "source",
        // 例外的图片抓取域名
        "catcherLocalDomain": [
          "127.0.0.1",
          "localhost"
        ],
        // 图片访问路径前缀，默认值：空
        "catcherUrlPrefix": "",
        // 上传保存路径,可以自定义保存路径和文件名格式，默认值：{filename}{rand:6}
        "catcherMaxSize": 10485760,
        // 抓取图片格式显示，默认值：[".png", ".jpg", ".jpeg", ".gif", ".bmp"]
        "catcherAllowFiles": [
          ".jpg",
          ".png",
          ".jpeg"
        ],

        // 视频上传配置
        // 执行上传视频的action名称，默认值：video
        "videoActionName": "uploadVideo",
        // 提交的视频表单名称，默认值：file
        "videoFieldName": "file",
        // 视频访问路径前缀
        "videoUrlPrefix": "",
        // 上传大小限制，单位B，默认值：102400000
        "videoMaxSize": 104857600,
        // 上传视频格式显示
        "videoAllowFiles": [
          ".mp4"
        ],

        // 文件上传配置
        // 执行上传文件的action名称，默认值：file
        "fileActionName": "uploadFile",
        // 提交的文件表单名称，默认值：file
        "fileFieldName": "file",
        // 文件访问路径前缀
        "fileUrlPrefix": "",
        // 上传保存路径,可以自定义保存路径和文件名格式，默认值：{filename}{rand:6}
        "fileMaxSize": 104857600,
        // 上传文件格式显示
        "fileAllowFiles": [
          ".zip",
          ".pdf",
          ".doc"
        ],

        // 图片列表配置
        // 执行图片管理的action名称，默认值：listImage
        "imageManagerActionName": "listImage",
        // 每次列出文件数量
        "imageManagerListSize": 20,
        // 图片访问路径前缀
        "imageManagerUrlPrefix": "",
        // 插入的图片浮动方式，默认值：none
        "imageManagerInsertAlign": "none",
        // 列出的文件类型
        "imageManagerAllowFiles": [
          ".jpg",
          ".png",
          ".jpeg"
        ],

        // 文件列表配置
        // 执行文件管理的action名称，默认值：listFile
        "fileManagerActionName": "listFile",
        // 指定要列出文件的目录
        "fileManagerUrlPrefix": "",
        // 每次列出文件数量
        "fileManagerListSize": 20,
        // 列出的文件类型
        "fileManagerAllowFiles": [
          ".zip",
          ".pdf",
          ".doc"
        ],
        zIndex: 50000,
        // 公式配置
        "formulaConfig": {
          // 公式渲染的路径
          "imageUrlTemplate": "https://r.latexeasy.com/image.svg?{}"
        }
      },
      fullToolbar: [
        [
          "fullscreen",   // 全屏
          "source",       // 源代码
          "|",
          "undo",         // 撤销
          "redo",         // 重做
          "|",
          "bold",         // 加粗
          "italic",       // 斜体
          "underline",    // 下划线
          "fontborder",   // 字符边框
          "strikethrough",// 删除线
          "superscript",  // 上标
          "subscript",    // 下标
          "removeformat", // 清除格式
          "formatmatch",  // 格式刷
          "autotypeset",  // 自动排版
          "blockquote",   // 引用
          "pasteplain",   // 纯文本粘贴模式
          "|",
          "forecolor",    // 字体颜色
          "backcolor",    // 背景色
          "insertorderedlist",   // 有序列表
          "insertunorderedlist", // 无序列表
          "selectall",    // 全选
          "cleardoc",     // 清空文档
          "|",
          "rowspacingtop",// 段前距
          "rowspacingbottom",    // 段后距
          "lineheight",          // 行间距
          "|",
          "customstyle",         // 自定义标题
          "paragraph",           // 段落格式
          "fontfamily",          // 字体
          "fontsize",            // 字号
          "|",
          "directionalityltr",   // 从左向右输入
          "directionalityrtl",   // 从右向左输入
          "indent",              // 首行缩进
          "|",
          "justifyleft",         // 居左对齐
          "justifycenter",       // 居中对齐
          "justifyright",
          "justifyjustify",      // 两端对齐
          "|",
          "touppercase",         // 字母大写
          "tolowercase",         // 字母小写
          "|",
          "link",                // 超链接
          "unlink",              // 取消链接
          "anchor",              // 锚点
          "|",
          "imagenone",           // 图片默认
          "imageleft",           // 图片左浮动
          "imageright",          // 图片右浮动
          "imagecenter",         // 图片居中
          "|",
          "simpleupload",        // 单图上传
          "insertimage",         // 多图上传
          "emotion",             // 表情
          "scrawl",              // 涂鸦
          "insertvideo",         // 视频
          "attachment",          // 附件
          "insertframe",         // 插入Iframe
          "insertcode",          // 插入代码
          "pagebreak",           // 分页
          "template",            // 模板
          "background",          // 背景
          "formula",             // 公式
          "|",
          "horizontal",          // 分隔线
          "date",                // 日期
          "time",                // 时间
          "spechars",            // 特殊字符
          "wordimage",           // Word图片转存
          "|",
          "inserttable",         // 插入表格
          "deletetable",         // 删除表格
          "insertparagraphbeforetable",     // 表格前插入行
          "insertrow",           // 前插入行
          "deleterow",           // 删除行
          "insertcol",           // 前插入列
          "deletecol",           // 删除列
          "mergecells",          // 合并多个单元格
          "mergeright",          // 右合并单元格
          "mergedown",           // 下合并单元格
          "splittocells",        // 完全拆分单元格
          "splittorows",         // 拆分成行
          "splittocols",         // 拆分成列
          "contentimport",       // 内容导入（支持Word、Markdown）
          "|",
          "print",               // 打印
          "preview",             // 预览
          "searchreplace",       // 查询替换
          "help",                // 帮助
        ]
      ],
    }
  }
}
</script>
